<template>
   <section class="courses">
       <!-- 表单查询部分 -->
       <el-form :inline="true" :model="filter" class="actions">
            <el-form-item label="课程名称">
                <el-input v-model="filter.course_name" placeholder="请输入课程名称"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="filter.state" placeholder="课程状态" >
                    <el-option label="全部" value></el-option>
                    <el-option label="已发布" value="1"></el-option>
                    <el-option label="草稿" value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="filterQuery">查询</el-button>
            </el-form-item>
            <el-form-item class="btn-add">
                <el-button type="primary" icon="el-icon-plus" @click="addCourse">新建课程</el-button>
            </el-form-item>    
       </el-form>

         <el-table
      :data="courses"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="ID"
         width="100"
        >
      </el-table-column>
      <el-table-column
        prop="course_name"
        label="课程名称"
        width="200">
      </el-table-column>
      <!-- formatter	用来格式化内容 -->
      <el-table-column
        prop="price"
        label="价格"
         width="120"
         :formatter="priceFormatter">
      </el-table-column>
      <el-table-column
        prop="sort_num"
        label="排序"
         width="120">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        width="120"
        >
            <template slot-scope="scope">
            <i class="status status-success"
            title="已发布"
            v-if="scope.row.status=='1'"
            @click="updataStatus(scope.row)">
            </i>
            <i class="status status-warning"
            title="草稿"
            v-if="scope.row.status=='0'">
            </i>
            </template>
      </el-table-column>
      <el-table-column
        label="操作" align="center">
         <template slot-scope="scope">
             <el-button
            size="small"
            :type="scope.row.status == '1' ? 'danger' : 'success'"
            @click="updataStatus(scope.row)"
            >{{ scope.row.status == "1" ? "下架" : "发布" }}</el-button
          >
            <el-button  size="small" @click="handleNavigate('CourseItem',scope.row.id)">营销信息</el-button>
            <el-button  size="small" @click="handleNavigate('CourseTasks',scope.row.id)">内容管理</el-button>
        </template>
      </el-table-column>
    </el-table>

   </section>
</template>

<script>
import {axios} from "../utils/index.js"
export default {
    data()
    {
        return{
              filter: {
                course_name: '',
                state:"",
            }, 
           courses: []
        }
    },
    created()
    {
        //请求加载数据
        this.loadCourses()
    },
    methods:{
        //新建课程
        addCourse()
        {
            //
            this.$router.push({name:"CourseItem",params:{courseId:"new"}})
        },
        //跳转到营销信息/内容管理页面，name：路由对应名称，因为与参数同名，只写一个就好。id：选中课程的id
        handleNavigate(name,id)
        {
            console.log("name",name,"id",id);
            this.$router.push({name,params:{courseId:id}})
        },

        updataStatus(rowData)
        {
            // console.log("SDas",rowData);
            axios.get("/course",{
                params:{
                    methodName:"updateCourseStatus",
                    id:rowData.id
                }
            }).then((resp)=>{
                // console.log("修改课程状态:", JSON.parse(JSON.stringify(resp)));
                this.courses.forEach(course=>{
                   if(course.id ===rowData.id)
                   {
                       course.status=resp.data.status
                   }
                })
            }).catch((error) => {
          this.$message.error("数据获取失败：" + error);
        });
        },
        
        priceFormatter(row, column, cellValue, index)
        {
            return  "￥"+cellValue
        },

        filterQuery()
        {
            //拿到过滤条件
            const filterName=this.filter.course_name;
            const filterState=this.filter.state;
            //把查询到的过滤条件作为接口参数,并向后端发起请求获取过滤后的数据
            axios.get("/course",{
                params:{
                    methodName:"findByCourseNameAndStatus",
                    course_name:filterName,
                    status:filterState
                },
            }).then((resp)=>{
                // console.log("过滤之后的返回结果：", JSON.parse(JSON.stringify(resp)));
                const courseData = resp.data;
                    // 把数据渲染到模板中,$nextTick下一次的dom更新完后,进行渲染
                    this.$nextTick(() => {
                        this.courses = courseData;
                    })
            }).catch((error) => {
          this.$message.error("数据获取失败：" + error);
        });

        },
        //向后端请求加载数据
        loadCourses()
        {
                axios.get("/course",{
                    params:{
                        methodName:"findCourseList",
                    },
                }).then((resp) => {
                    // console.log("请求课程列表",JSON.parse(JSON.stringify(resp)));
                    const courseData = resp.data;
                    // 把数据渲染到模板中,$nextTick下一次的dom更新完后,进行渲染
                    this.$nextTick(() => {
                        this.courses = courseData;
                    });
                }).catch((error) => {
          this.$message.error("数据获取失败：" + error);
        });
        }
    }
}
</script>

<style scoped lang="scss">
.courses .actions {
  display: flex;
  align-items: flex-end;
}
.btn-add
{
    margin-left:20%;
}
</style>